<template>
    <view class="system-page">
        <view class="system-nav">
            <uni-nav-bar 
                left-icon="back" 
                title="报告单列表"
                color="#fff"
                backgroundColor="transparent"
                @clickLeft="back"
                :statusBar="true"
                :border="false"
            ></uni-nav-bar>
        </view>
        <view class="system-contain">
            <view class="system-header">
                <view class="result-title">报告单号：{{form['reportCode']||''}}</view>
                <scroll-view :scroll-y="true" class="result-scroll">
                    <view class="result-li" v-for="(ele,index) in list" :key="index">
                        <view class="result-badge">{{index+1}}</view>
                        <view class="result-code">
                            <view>
                                <text>任务单编号：</text>
                                <text>{{ele['tsakCode']}}</text>
                            </view>
                        </view>
                        <view class="start-time">开始时间：{{ele['videoStartTime']}}</view>
                        <view class="end-time">结束时间：{{ele['videoEndTime']}}</view>
                        <view class="result-play" hover-class="btn_click" @click.native.prevent="onPlay(ele)"></view>
                    </view>
                </scroll-view>
            </view>
            <!-- 普通弹窗 -->
            <uni-popup ref="onStopRecord" :maskClick="false">
                <view class="popup-wrap">
                    <view class="popup-content">
                        <view class="popup-title">
                            <view class="popup-text">播放视频</view>
                            <uni-icons type="closeempty" size="16" color="#1D2129" class="popup-icon" hover-class="btn_click" @click.native.prevent="onCancel"></uni-icons>
                        </view>
                        <video 
                            v-if="videoSrc"
                            class="popup-video" 
                            :src="videoSrc"
                            @error="videoErrorCallback"
                            controls
                        ></video>
                        <div v-else class="popup-video"></div>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
import { puyuTReportQueryById, updateReportNum } from '@/service/report';

export default {
    name: 'ReportListPage',
    props: {
        row: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        row: {
            handler(query) {
                // 增加次数
                updateReportNum(query['reportId']);
                // 单条查询
                puyuTReportQueryById(query['reportId']).then(res => {
                    if( res && res['data'] ) {
                        this.form = res['data'];
                        this.list = res['data']['samples'];
                    }
                });
            },
            deep: true // 使用深度监听
        }
    },
    data() {
        return {
            videoSrc: '',
            form: {},
            list: []
        }
    },
    methods: {
        back() {
            let url = `/pages/authHome/index`;
            this.$Router.redirect(url);
        },
        videoErrorCallback(e={target:{}}) {
            uni.showModal({
                title: '播放错误',
                content: e.target.errMsg || '视频流获取失败',
                complete: () => {
                    this.onCancel()
                }
            });
        },
        onCancel() {
            this.$refs.onStopRecord.close()
        },
        onSubmit() {
            this.onCancel()
        },
        // 播放视频
        onPlay(ele) {
            this.videoSrc = ele['videoPath'];
            this.$refs.onStopRecord.open('center');
        }
    }
}
</script>

<style lang="scss" scoped>
.system-page {
    height: 100%;
    background-color: #F5F5F5;
    .system-nav {
        height: 350rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url($uni-image-ip+'/clude-nav.png');
    }
    .system-contain {
        display: flex;
        justify-content: center;
        margin-top: -100rpx;
        height: calc(100% - 350rpx);
        .system-header {
            border-radius: 20rpx;
            background-color: #ffffff;
            width: 678rpx;
            box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(44, 51, 44, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #1D2129;
            padding-left: 20rpx;
            padding-right: 20rpx;
            padding-bottom: 50rpx;
            .result-title {
                padding-top: 60rpx;
                padding-bottom: 10rpx;
                font-size: 32rpx;
                font-weight: 600;
            }
            .result-li {
                width: 100%;
                border-radius: 8rpx;
                padding-left: 40rpx;
                padding-right: 100rpx;
                padding-top: 20rpx;
                padding-bottom: 26rpx;
                box-sizing: border-box;
                font-size: 28rpx;
                color: #1D2129;
                // background-color: rgba(0,0,0,.1);
                background-color: #F0F3FE;
                margin-top: 20rpx;
                position: relative;
            }
            .result-scroll {
                flex: 1;
                box-sizing: border-box;
                padding-top: 20rpx;
                padding-bottom: 20rpx;
                overflow: hidden;
            }
            .result-play {
                position: absolute;
                right: 50rpx;
                width: 42rpx;
                height: 42rpx;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url($uni-image-ip+'/play.png');
                top: 50%;
                transform: translate(0, -50%);
            }
            .result-badge {
                position: absolute;
                top: -4px;
                left: 0px;
                color: #fff;
                font-size: 8px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                border-radius: 50%;
                background-color: #043DFA;
            }
            .result-success {
                color: #6DD400;
            }
            .result-code {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #043DFA
            }
            .start-time {
                margin-top: 22rpx;
                color: #86909C;
                font-size: 24rpx;
            }
            .end-time {
                margin-top: 16rpx;
                color: #86909C;
                font-size: 24rpx;
            }
            .result-btn {
                display: flex;
                justify-content: space-between;
                width: 100%;
                .result-error {
                    height: 66rpx;
                    font-size: 24rpx;
                    color: #fff;
                    width: 45%;
                    background-color: $uni-color-error;
                }
                .result-primary {
                    height: 66rpx;
                    font-size: 24rpx;
                    color: #fff;
                    width: 45%;
                    background-color: $uni-color-primary;
                }
            }
        }
    }
    .popup-wrap {
        padding-left: 40rpx;
        padding-right: 40rpx;
    }
    .popup-content {
        background-color: rgba(255,255,255,1);
        padding-left: 30rpx;
        padding-right: 30rpx;
        padding-bottom: 30rpx;
        border-radius: 20rpx;
        .popup-title {
            color: #1D2129;
            font-size: 34rpx;
            line-height: 44rpx;
            padding-top: 44rpx;
            padding-bottom: 44rpx;
            display: flex;
        }
        .popup-text {
            text-align: center;
            flex: 1;
        }
        .popup-p {
            color: #1D2129;
            font-size: 26rpx;
        }
        .popup-btn {
            padding-top: 44rpx;
            padding-bottom: 44rpx;
            display: flex;
            .popup-error {
                width: 124rpx;
                height: 66rpx;
                font-size: 24rpx;
            }
            .popup-primary {
                width: 124rpx;
                height: 66rpx;
                font-size: 24rpx;
                background-color: $uni-color-primary;
                color: #fff;
            }
        }
        .popup-video {
            width: 600rpx;
            height: 700rpx;
        }
    }
}
</style>